<template>
  <div id="map" ref="refMap" class="leaflet-map-class" v-contextmenu:contextmenu>
    <div class="operation">
      <!--click.stop阻止事件继续传递执行-->
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="markClick"
        >绘制标记</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="plotClick"
        >绘制多边形</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="dragClick"
        >拖动多边形</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="editClick"
        >编辑多边形</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="importClick"
        >导入行政边界（KML文件）</el-button
      >

      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
      >
        <el-button size="small" type="primary">导入行政边界（KML文件）</el-button>
      </el-upload>
    </div>
  </div>

  <v-contextmenu ref="contextmenu">
    <v-contextmenu-group title="">
      <v-contextmenu-item @click="savePolygon">
        <img :src="url" class="image-size" />
      </v-contextmenu-item>
      <v-contextmenu-item @click="deletePolygon">
        <img :src="url" class="image-size" />
      </v-contextmenu-item>
    </v-contextmenu-group>
  </v-contextmenu>
</template>
<script>
import { useMap } from './useMap'
import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
import '../../../public/L.KML.js'
import {
  directive,
  Contextmenu,
  ContextmenuItem,
  ContextmenuDivider,
  ContextmenuSubmenu,
  ContextmenuGroup
} from 'v-contextmenu'
import 'v-contextmenu/dist/themes/default.css'

export default defineComponent({
  directives: {
    contextmenu: directive
  },
  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
    [ContextmenuDivider.name]: ContextmenuDivider,
    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
    [ContextmenuGroup.name]: ContextmenuGroup
  },
  setup() {
    const contextmenu = ref(null)
    const refMap = ref(null)
    let map = {}
    const state = reactive({
      url: '../images/map-app/btn-save-normal.png',
      markerPoint: {}, // Marker标记
      plotPolygon: [] // Polygon多边形
    })

    // const { init } = useMap();
    const markClick = () => {
      map.pm.enableDraw('Marker', {
        continueDrawing: false // 设置后  marker标记完一个后，右键不会移除
      })
    }
    const plotClick = () => {
      console.log('open')
      map.pm.enableDraw('Polygon', {
        pinning: true,
        // finishOn: "click",
        snappable: true, // 可吸附于附近的某一个点
        measurements: { measurement: true }
      })
    }

    const editClick = () => {
      map.pm.enableGlobalEditMode({
        allowSelfIntersection: false
      })
    }

    const dragClick = () => {
      console.log('drag')
      map.pm.enableGlobalDragMode()
    }

    const importClick = () => {
      console.log('导入kml')
    }

    const beforeUpload = (file) => {
      console.log(file, 'beforeUpload----上传文件')
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file)

      fileReader.onload = () => {
        console.log(fileReader.result, 'fileReader.result')
        const parser = new DOMParser()
        const kml = parser.parseFromString(fileReader.result, 'text/xml')
        const track = new L.KML(kml)
        console.log(track, 'track')
        map.addLayer(track)

        // Adjust map to show the kml
        const bounds = track.getBounds()
        map.fitBounds(bounds)
      }
    }

    const onSuccess = (response, file, fileList) => {
      console.log('success----on', response, file)
    }

    onMounted(() => {
      const { init } = useMap()
      map = init([34.263742732916505, 108.01650524139406])

      // 图层创建成功结束时调用的方法（目前针对Marker和Polygon多边形）
      map.on('pm:create', (e) => {
        // Polygon 多边形
        if (e.shape === 'Polygon') {
          console.log('绘制多边形', e)
        }

        // Marker标记
        if (e.shape === 'Marker') {
          // 只保留最后一次点击的Marker
          map.eachLayer(function (layer) {
            console.log(layer._url, layer._leaflet_id, layer.pm)
            if (
              layer.pm &&
              layer.pm._shape === 'Marker' &&
              e.marker._leaflet_id !== layer._leaflet_id
            ) {
              layer.remove()
            }
          })
          // map.pm.disableDraw();
          // map.pm.disableGlobalEditMode();
        }

        e.layer.on('click', function () {
          console.log('创建了图层后的click事件')
        })

        e.layer.on('pm:edit', (event) => {
          // 修改坐标
          console.log(event, 'pm:edit拖动')
        })
      })
    })
    return {
      ...toRefs(state),
      refMap,
      contextmenu,
      plotClick,
      dragClick,
      markClick,
      editClick,
      importClick,
      beforeUpload,
      onSuccess
    }
  }
})
</script>
<style lang="scss" scoped>
.leaflet-map-class {
  width: calc(100vw - 270px);
  height: calc(100vh - 90px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.operation {
  position: absolute;
  z-index: 10000;
  top: 20px;
  left: 10px;
  padding: 2px;
  // width: 120px;
  height: 30px;
}

.image-size {
  width: 18px;
  height: 18px;
}
</style>
